<template>
  <div class="cart-item" @click.stop="toDetail(item)">
    <div class="left-col">
      <img :src="item.productPic" />
    </div>
    <div class="right-col">
      <div class="title">{{item.productName}}</div>
      <div class="desc">{{formatAttr(item.productAttr)}}</div>
      <div class="price">￥{{formatPrice(item.price)}}</div>
      <div class="num-step" @click.stop="stop">
        <slot name="num-step"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    formatPrice(price) {
      return price.toFixed(2);
    },
    formatAttr(data) {
      const attrArray = JSON.parse(data)
      return attrArray.map(ele => ele.value).join(",") || '';
    },
    toDetail(item) {
      this.$router.push({name:'goods',params:{id:item.productId}})
    },
    stop() {
      //防止冒泡
    }
  }
};
</script>
<style lang="scss" scoped>
.cart-item {
  padding: 10px 0;
  margin-left: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  .left-col {
    width: 90px;
    height: 90px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
  }
  .right-col {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: 12px;
    .title {
      max-height: 32px;
      font-weight: 500;
      line-height: 16px;
      font-size: 14px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .desc {
      max-height: 20px;
      line-height: 20px;
      color: #7d7e80;
      word-break: break-all;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .price {
      display: inline-block;
      color: #f44;
      font-weight: 500;
    }
    .num-step {
      position: absolute;
      right: 10px;
    }
  }
}
</style>